<template>
  <div class="bean-trans-wrap bg-color">
    <div class="trans-item">
      <van-cell-group class="trans-item-cells">
        <van-cell title="可提现金额" :border="false">
          <div Slots="value">
            <span style="font-family: DingMedium;color:#FF6D24">{{this.cash_money}}</span>
          </div>
        </van-cell>
        <van-cell title="提现金额" :border="false">
          <div Slots="value">
            <van-row>
              <van-col :span="18">
                <van-field
                  v-model="money"
                  placeholder="最低可提1元"
                  type="number"
                  style="margin:0;padding:0;font-size:12px"
                />
              </van-col>
              <van-col :span="6">
                <span @click="checkAll" style="color:#5C92E9;border-bottom:1px solid #5C92E9">全部</span>
              </van-col>
            </van-row>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="trans-item">
      <van-cell-group>
        <van-cell title="提现到" is-link :arrow-direction="show ? 'down': ''">
          <div Slots="value">
            <p @click="show = true">{{bankCardName}}</p>
            <van-action-sheet v-model="show" title="银行卡">
              <div class="content">
                <div class="account_cards_wrap">
                  <scriptLink></scriptLink>
                  <ul class="card_list">
                    <li
                      v-for="(item,index) in accountCardList"
                      :key="index"
                      @click="chooseCard(item)"
                    >
                      <div :class="['cards_item','bank_bg_'+(index%3)]">
                        <div class="card_info">
                          <div class="item_icon">
                            <svg class="icon bank_icon" aria-hidden="true">
                              <use :xlink:href="'#'+item.bank_logo" />
                            </svg>
                          </div>
                          <div class="item_info">
                            <p>{{item.card_holder}}</p>
                            <p>
                              <span>{{item.bank_name}}</span>
                              <span>尾号 {{item.bank_card}}</span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </van-action-sheet>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="fix-bottom-btn">
      <van-button type="custom-primary" size="large" block @click="toTransComplete">提交申请</van-button>
    </div>
    <!-- 安保密码 -->
    <van-overlay :show="showAB" @click="closeAb">
      <div class="wrapper" @click.stop>
        <div class="anbao-contetn">
          <p class="anbo-title">请输入安保密码</p>
          <span class="close-anbo" @click="closeAb">
            <van-icon name="cross" />
          </span>
          <van-password-input
            :value="anBaoPwd"
            info="密码为 6 位数字"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
          />
        </div>
      </div>
    </van-overlay>
    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import bankCardList from "@/assets/js/bankCardList";
import {
  Cell,
  CellGroup,
  Field,
  Col,
  Row,
  Button,
  ActionSheet,
  Overlay,
  PasswordInput,
  NumberKeyboard,
  Toast,
  Icon,
  Dialog,
} from "vant";
import { getAllBankCard, cashOutMoney } from "@/api/api";
import { getMessageBox } from "@/assets/js/utils";
export default {
  name: "widthDrawApply",
  components: {
    scriptLink: {
      render(createElement) {
        return createElement("script", {
          attrs: {
            type: "text/javascript",
            src: "//at.alicdn.com/t/font_1409441_hxsfeysl9j.js",
          },
        });
      },
    },
    vanCell: Cell,
    vanCellGroup: CellGroup,
    vanField: Field,
    vanCol: Col,
    vanRow: Row,
    vanButton: Button,
    vanActionSheet: ActionSheet,
    vanOverlay: Overlay,
    vanPasswordInput: PasswordInput,
    vanNumberKeyboard: NumberKeyboard,
    vanIcon: Icon,
  },
  data() {
    return {
      // 显示安保密码
      showAB: false,
      // 显示键盘
      showKeyboard: false,
      // 最多可提现余额
      cash_money: this.$route.query.cash_money,
      // 提现金额
      money: "",
      // 提现银行卡id
      bankCardId: "",
      // 提现银行卡名称
      bankCardName: "",
      // 安保密码
      anBaoPwd: "",
      // 显示银行卡列表
      show: false,
      // 已绑定银行卡列表
      accountCardList: [],
    };
  },
  created() {
    this.getBankCardList();
  },
  methods: {
    checkAll() {
      this.money = this.cash_money;
    },
    // 输入安保密码
    toTransComplete() {
      if (this.money == "") {
        getMessageBox("提现金额不能为空");
        return false;
      }
      if (Number.parseFloat(this.money) < 1) {
        getMessageBox("提现金额不能小于1元");
        return false;
      }
      this.showAB = true;
      this.showKeyboard = true;
    },
    // 提交提现申请
    submitWidthDraw() {
      this.showAB = false;
      Toast.loading({
        message: "提现申请中",
        forbidClick: true,
        duration: 0,
      });
      cashOutMoney({
        anBaoPwd: this.$md5(this.anBaoPwd),
        bankCardId: this.bankCardId,
        money: this.money,
      })
        .then((res) => {
          Toast.clear();
          this.closeAb();
          if (res.code == 200000) {
            Dialog.alert({
              title: "提示",
              message: res.data,
              theme: "round-button",
              confirmButtonColor: "#328BF2",
              className: "custom-dialog",
            }).then(() => {
              this.$router.push({
                path: "/myAcccount",
              });
            });
          } else {
            getMessageBox(res.msg);
          }
        })
        .catch((err) => {
          Toast.clear();
          this.closeAb();
        });
    },
    // 选择银行卡
    chooseCard(item) {
      this.setCheckedBack(item.id, item.bank_name);
    },
    // 设置当前银行卡信息
    setCheckedBack(id, name) {
      this.bankCardId = id;
      this.bankCardName = name;
      this.show = false;
    },
    // 获取银行卡列表
    getBankCardList() {
      getAllBankCard().then((res) => {
        if (res.code == 200000) {
          bankCardList.map((bankElem, bankIndex) => {
            res.data.forEach((cardElem, index) => {
              if (
                bankElem.value == cardElem.bank_name ||
                bankElem.value == `中国${cardElem.bank_name}`
              ) {
                cardElem.bank_logo = "icon" + bankIndex;
                return false;
              }
            });
          });
          this.accountCardList = res.data;
          this.setCheckedBack(
            this.accountCardList[0].id,
            this.accountCardList[0].bank_name
          );
        } else {
          this.accountCardList = [];
        }
      });
    },
    onInput(key) {
      this.anBaoPwd = (this.anBaoPwd + key).slice(0, 6);
      if (this.anBaoPwd.length == 6) {
        this.showKeyboard = false;

        this.submitWidthDraw();
      }
    },
    onDelete() {
      this.anBaoPwd = this.anBaoPwd.slice(0, this.anBaoPwd.length - 1);
    },
    closeAb() {
      this.showAB = false;
      this.anBaoPwd = "";
    },
  },
};
</script>

<style lang="less" scoped>
.bean-trans-wrap {
  margin-bottom: 100px;
  width: 375px;
  overflow: hidden;
  min-height: calc(100% - 100px);

  .lnie-place {
    width: 100%;
    height: 10px;
    background: rgba(241, 246, 253, 1);
  }
}

.account_cards_wrap {
  overflow: hidden;
  border-bottom: 1px solid rgb(241, 241, 241);
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.11);

  ul.card_list {
    margin: 30px 15px 0;
    overflow: hidden;

    li {
      .cards_item {
        width: 100%;
        height: 84px;
        background-size: 100% 100%;
        border-radius: 10px 10px 0 0;
        overflow: hidden;

        .card_info {
          height: 50px;
          overflow: hidden;
          margin-top: 17px;

          .item_icon {
            width: 39px;
            height: 39px;
            background: #fff;
            border-radius: 50%;
            overflow: hidden;
            float: left;
            margin-top: 5px;
            margin-left: 20px;

            .bank_icon {
              padding: 0;
              width: 24px;
              height: 24px;
              display: block;
              margin: 8px auto;
              overflow: hidden;
            }
          }

          .item_info {
            float: left;
            width: 250px;
            margin-left: 20px;

            p,
            span {
              color: #fff;
            }

            p:nth-of-type(1) {
              font-size: 18px;
              line-height: 23px;
            }

            p:nth-of-type(2) {
              line-height: 33px;

              span {
                font-size: 14px;
                line-height: 15px;
              }
            }
          }
        }
      }

      .cards_item.bank_bg_0 {
        background-image: url("../../../assets/images/bgcard0.png");
      }

      .cards_item.bank_bg_1 {
        background-image: url("../../../assets/images/bgcard1.png");
      }

      .cards_item.bank_bg_2 {
        background-image: url("../../../assets/images/bgcard2.png");
      }
    }

    li:not(:first-child) {
      margin-top: -8px;
    }
  }

  .key_board_wrap {
    padding-top: 20px;

    .van-number-keyboard {
      position: relative;
      margin-top: 20px;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .anbao-contetn {
    position: relative;
    width: 300px;
    height: auto;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    min-height: 100px;
    position: absolute;
    padding-bottom: 20px;
    p.anbo-title {
      text-align: center;
      line-height: 30px;
      font-size: 18px;
      margin: 10px auto;
    }
    span.close-anbo {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 15px;
      top: 15px;
      font-size: 16px;
    }
  }
}
</style>
